<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="css/global.css" media="all">
	<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/admin/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="css/table.css" />
	<link rel="stylesheet" href="css/table.css" />
</head>

<body>
	<div class="admin-main">

		<!-- 用户订单留言 -->
		<fieldset class="layui-elem-field" style="padding:20px">
			<legend>订单信息列表</legend>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-inline">
						<input type="text" name="phone" id="phone" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">处理状态</label>
					<div class="layui-input-inline">
						<select name="modules" class="layui-input" id="status">
							<option value="0">未处理</option>
							<option value="1">已处理</option>
							<option value="">所有</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<a href="javascript:;" class="layui-btn" id="refresh">
						查询
					</a>
					<a href="javascript:;" class="layui-btn layui-btn-primary" id="reset">
						重置
					</a>
				</div>
				<div class="layui-inline" style="float:right">
					<a href="javascript:;" class="layui-btn layui-btn-danger" id="delbtn">
						删除选中记录
					</a>
				</div>
			</div>
			<table class="site-table table-hover">
				<thead>
					<tr>
						<th><input type="checkbox" class="all-checkbox"></th>
						<th>序号</th>
						<th>姓名</th>
						<th>公司名称</th>
						<th>联系电话</th>
						<th>预定车型</th>
						<th>出发时间</th>
						<th>出发地点</th>
						<th>备注</th>
						<th>预定时间</th>
						<th>处理状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tabContent">

				</tbody>
			</table>
	</div>
	</fieldset>
	<div class="admin-table-page">
		<div id="page" class="page" style="display:inline-block;max-width:500px">
		</div>
		<span style="
		float: right;
		margin-right: 60px;
		margin-top:10px;
	">总订单数共 <span id="total">0</span> 条记录</span>
	</div>

	</div>
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
	<script>
		layui.config({
			base: 'plugins/layui/modules/'
		});

		layui.use(['icheck', 'laypage', 'layer'], function () {
			var $ = layui.jquery,
				laypage = layui.laypage,
				layer = parent.layer === undefined ? layui.layer : parent.layer;


			//页面初始化的时候执行
			$(function () {
				//设置5秒钟轮询一次，查询数据库
				setInterval(getOrders, 60000);
				var phone = $('#phone').val();
				var status = $('#status').val();
				getData({ curr: 1, phone: phone, status: status });
				//5s执行一次，查询操作

				$('.all-checkbox').click(function ($event) {
					$('.tb-checkbox').prop('checked', $event.target.checked);
				})

				$('#delbtn').click(function ($event) {
					$event.preventDefault();
					//示范一个公告层
					var delIndex = layer.open({
						type: 1
						, title: ['删除提示', 'font-size:18px;'] //不显示标题栏
						, closeBtn: false
						, area: '300px;'
						, shade: 0.8
						, id: 'LAY_layuipro' //设定一个id，防止重复弹出
						, btn: ['确认删除', '取消']
						, btnAlign: 'c'
						, moveType: 1 //拖拽模式，0或者1
						, content: '<div style="padding: 20px ">删除后数据不可恢复，是否确认删除？</div>'
						, yes: function (layero) {
							delHandler();
							layer.close(delIndex);
						}
					});

				});
			});


			//点击刷新按钮
			$('#refresh').on('click', function () {
				query();

			});
			function query(flag) {
				var phone = $('#phone').val();
				var status = $('#status').val();
				getData({ curr: 1, phone: phone, status: status }, flag);

			}
			$('#reset').on('click', function () {
				$('#phone').val('');
				$('#status').val('0');
				getData({ curr: 1, phone: '', status: '0' });
			});

			/*删除分类*/
			$('#tabContent').on('click', '.deal-order', function () {
				var obj = $(this);
				var id = obj.parents('tr').attr('id');

				layer.confirm('确认已经处理了？', {
					icon: 0,
					title: '警告',
					shade: false
				}, function (index) {

					$.post("/admin/deal_orders", { id: id }, function (result) {
						if (result.status === "success") {
							layer.msg('处理完成!', {
								icon: 1,
								time: 1000
							});
							query();
						} else {
							layer.msg('系统错误!', {
								icon: 1,
								time: 1000
							});
						}
					});
				});
			});

			//从后台查询数据库，看是否有订单
			function getOrders() {
				$.get("/admin/check_orders", function (result) {
					if (result.status === 'success') {

						layer.open({
							type: '1'
							, offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
							, id: 'LAY_demo' + 'rb' //防止重复弹出
							, content: '<div style="padding: 20px 100px;">你有' + result.size + '条待处理订单信息,请在订单信息列表查看！</div>'
							, btn: '我知道了'
							, btnAlign: 'c' //按钮居中
							, shade: 0 //不显示遮罩
							, time: 10000 //10秒后自动关闭
							, anim: 2 //设置弹出的动画样式
							, yes: function () {
								layer.closeAll();
							}
						});

					}
				});
			};



			//从后台获取数据函数，获取页数curr的数据
			function getData(qryParams, flag) {
				$('.all-checkbox').prop('checked', false);
				var curr = qryParams.curr;
				$.post("/admin/get_orders", { curr: curr, status: qryParams.status, phone: qryParams.phone }, function (result) {
					if (!flag) {
						layer.msg('查询成功');
					}
					//拼接html内容
					var tabContent = "";
					//获取后台json数据
					var mydata = result.data;

					for (var i = 0; i < mydata.length; i++) {
						dealStr = '已完成'
						if (mydata[i].status === '0') {
							dealStr = '<span class="layui-btn layui-btn-normal layui-btn-mini deal-order">改状态</span>'
						}

						var tempStr = '<tr id=' + mydata[i]._id + '>' +
							/*序号分页后也必须得变动,每页十条数据*/
							'<td><input type="checkbox" class="tb-checkbox" data-id="' + mydata[i]._id + '"></td>' +
							'<td>' + (i + (curr - 1) * 10 + 1) + '</td>' +
							'<td>' + mydata[i].name + '</td>' +
							'<td>' + mydata[i].company + '</td>' +
							'<td>' + mydata[i].phone + '</td>' +
							'<td>' + mydata[i].carType + '</td>' +
							'<td>' + mydata[i].startTime + '</td>' +
							'<td>' + mydata[i].startPoint + '</td>' +
							'<td>' + mydata[i].mark + '</td>' +
							'<td>' + mydata[i].createTime + '</td>' +
							'<td>' + (mydata[i].status == '1' ? '已处理' : '未处理') + '</td>' +
							'<td>' +
							dealStr +
							'</td>' +
							'</tr>'
						tabContent = tabContent + tempStr;
					}
					//将拼接好的数据填入#tabContent中
					$("#tabContent").html(tabContent);
					$("#total").html(result.total || 0);
					//显示分页
					laypage({
						cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
						pages: result.pages, //通过后台拿到的总页数
						curr: curr || 1, //当前页
						jump: function (obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								var phone = $('#phone').val();
								var status = $('#status').val();
								getData({ curr: obj.curr, status: status, phone: phone });
							}
						}
					});

				});
			};
			/* 删除操作 */
			function delHandler() {
				var selectedRows = document.getElementsByClassName('tb-checkbox');
				var ids = [];
				for (var i = 0; i < selectedRows.length; i++) {
					if (selectedRows[i].checked) {
						ids.push(selectedRows[i].getAttribute('data-id'));
					}
				}
				if (!ids.length) {
					layer.alert('请选择需要删除的记录！', { icon: 5 });
					return;
				}
				$.post('/admin/remove_order', { id: ids }, function (result) {
					if (result && result.status === 'success') {
						layer.msg('删除成功！');
						query(true);
						return;
					}
				});
			}
		});
	</script>
</body>

</html>